Highcharts এর মাধ্যমে আপনি xAxis এবং yAxis এর বিভিন্ন সেটিংস কাস্টমাইজ করতে পারেন। অ্যাক্সিস কাস্টমাইজেশনের মাধ্যমে আপনি চার্টের ডেটা প্রদর্শনের পদ্ধতি নিয়ন্ত্রণ করতে পারবেন, যেমন অ্যাক্সিসের শিরোনাম, স্কেল, লেবেল, রেঞ্জ, এবং আরো অনেক কিছু। এই কাস্টমাইজেশন আপনার চার্টের পেশাদারিত্ব বাড়াতে সাহায্য করে।
এখানে xAxis এবং yAxis কাস্টমাইজ করার কিছু সাধারণ পদ্ধতি দেয়া হলো।
আপনার chart.component.ts ফাইলে xAxis এবং yAxis এর কনফিগারেশন কাস্টমাইজ করতে হবে। এখানে একটি উদাহরণ দেয়া হলো যেখানে আমরা xAxis এবং yAxis কাস্টমাইজ করব:
import { Component } from '@angular/core';
import * as Highcharts from 'highcharts';
@Component({
selector: 'app-chart',
templateUrl: './chart.component.html',
styleUrls: ['./chart.component.css']
})
export class ChartComponent {
Highcharts = Highcharts;
chartOptions = {
chart: {
type: 'line' // 'line' চার্ট টাইপ
},
title: {
text: 'Customized Axis Example' // চার্টের শিরোনাম
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'], // xAxis কাস্টম লেবেল
title: {
text: 'Months' // xAxis এর শিরোনাম
},
labels: {
style: {
fontSize: '14px',
fontWeight: 'bold'
}
},
tickInterval: 1, // xAxis এর টিকের দুরত্ব নির্ধারণ
gridLineWidth: 2, // xAxis এর গ্রিড লাইন এর প্রস্থ
},
yAxis: {
title: {
text: 'Values' // yAxis এর শিরোনাম
},
labels: {
format: '{value} units' // yAxis এর লেবেল ফরম্যাট
},
min: 0, // yAxis এর মিনিমাম মান
max: 10, // yAxis এর ম্যাক্সিমাম মান
tickInterval: 2, // yAxis এর টিকের দুরত্ব নির্ধারণ
gridLineWidth: 1, // yAxis এর গ্রিড লাইন এর প্রস্থ
tickColor: '#ff0000', // yAxis এর টিক মার্কের রঙ
},
series: [{
name: 'Data Series',
data: [1, 3, 2, 4, 5, 6, 7] // ডেটা সিরিজ
}]
};
}
xAxis হল চার্টের নিচের এক্স-অ্যাক্সিস, যা সাধারণত ক্যাটেগরি বা টাইম লাইন এর তথ্য প্রদর্শন করে। এটি কাস্টমাইজ করার জন্য আপনি বিভিন্ন অপশন ব্যবহার করতে পারেন:
উদাহরণ: এখানে আমরা xAxis এর শিরোনাম ‘Months’ এবং ফন্ট সাইজ পরিবর্তন করেছি।
yAxis হল চার্টের বাম দিকের Vertical Axis। এটি ডেটার মান প্রদর্শন করে এবং বিভিন্ন কাস্টমাইজেশন অপশন সরবরাহ করে:
উদাহরণ: এখানে আমরা yAxis এর লেবেল ফরম্যাট {value} units দিয়ে পরিবর্তন করেছি এবং min ও max মান নির্ধারণ করেছি।
chart.component.html ফাইলে Highcharts কম্পোনেন্ট ব্যবহার করে চার্টটি রেন্ডার করা হয়:
<div style="width: 100%; height: 400px;">
<highcharts-chart
[Highcharts]="Highcharts"
[options]="chartOptions">
</highcharts-chart>
</div>
এখন অ্যাপ্লিকেশনটি চালু করতে ng serve কমান্ডটি ব্যবহার করুন এবং আপনার ব্রাউজারে গিয়ে http://localhost:4200/ তে গিয়ে কাস্টমাইজড এক্স এবং ওয়াই অ্যাক্সিস সহ চার্টটি দেখতে পারবেন।
ng serve
Highcharts এর xAxis এবং yAxis কাস্টমাইজেশন আপনাকে চার্টের অ্যাক্সিসের শিরোনাম, লেবেল, স্কেল, গ্রিড লাইন এবং টিক মার্ক কাস্টমাইজ করার সুবিধা দেয়। এটি আপনার ডেটা ভিজ্যুয়ালাইজেশনের আরও স্পষ্টতা এবং পেশাদারিত্ব যোগ করে। আপনি বিভিন্ন প্রপার্টি ব্যবহার করে অ্যাক্সিসের অবস্থান, ফরম্যাট এবং শৈলী পরিবর্তন করতে পারবেন, যা আপনাকে ব্যবহারকারীর জন্য আরো অর্থবোধক ও আকর্ষণীয় চার্ট তৈরি করতে সহায়ক হবে।
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
